<template>
  <div id="photoManage">
    <div style="margin:5px 0 10px 0">
      <Button type="primary" size="large" @click="exportData()">
        <Icon type="ios-download-outline"></Icon>Export data
      </Button>
      <div class="search_input">
        <Input
          search
          enter-button
          placeholder="Enter something..."
          v-model="PhotoValue"
          @on-change="searchPhoto"
        />
      </div>
    </div>
    <Table :data="showData" :columns="tableColumns1" stripe ref="tables">
      <template slot-scope="{ row, index }" slot="id">
        <Input type="text" disabled="disabled" v-model="editId" v-if="editIndex === index"/>
        <span v-else>{{ row.id }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="type">
        <Input type="text" v-model="editTypes" v-if="editIndex === index"/>
        <span v-else>{{ row.type }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="info">
        <Input type="text" v-model="editInfo" v-if="editIndex === index"/>
        <span v-else>{{ row.info }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <Button @click="handleSave(index)">保存</Button>
          <Button @click="editIndex = -1">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">操作</Button>
          <Button type="success" @click="handleDetail(index)">详细</Button>
          <Button type="error" @click="handleremove(index)">删除</Button>
        </div>
      </template>
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page
          :total="photoTotalList"
          :page-size="pageSize"
          v-if="photoTotalList"
          :current="currentPage"
          @on-change="changePage"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  inject: ["reload"],
  name: "PhotoManage",
  data() {
    return {
      photoData: this.tableDataPhoto(),
      showData: [],
      photoSearchData: [],
      photoTotalList: 0,
      currentPage: 1,
      pageSize: 10,
      PhotoValue: "",
      tableColumns1: [
        {
          title: "Id",
          key: "id",
          slot: "id"
        },
        {
          title: "Types",
          key: "type",
          slot: "type"
        },
        {
          title: "Info",
          key: "info",
          slot: "info"
        },
        {
          title: "操作",
          key: "action",
          slot: "action"
        }
      ],
      editIndex: -1,
      editId: "",
      editTypes: "",
      editInfo: ""
    };
  },
  methods: {
    tableDataPhoto() {
      axios.get("api/indexImage").then(res => {
        res = res.data;
        if (res.data) this.photoData = res.data;
        this.HandershowData();
      });
    },
    HandershowData() {
      this.photoTotalList = this.photoData.length;
      if (this.photoTotalList < this.pageSize) {
        this.showData = this.photoData;
        this.photoSearchData = this.showData;
      } else {
        this.showData = this.photoData.slice(0, this.pageSize);
        this.photoSearchData = this.showData;
      }
    },
    exportData() {
      console.log(this.photoData);
      if (this.photoData) {
        this.$refs.tables.exportCsv({
          filename: "The photoData"
        });
      }
    },
    changePage(index) {
      let start = (index - 1) * this.pageSize;
      let end = index * this.pageSize;
      this.showData = this.photoData.slice(start, end);
      console.log(this.showData);
      //   this.photoData = this.tableDataPhoto();
      // console.log(index)
    },
    searchPhoto() {
      let photojsons = {
        type: this.PhotoValue,
        info: this.PhotoValue
      };
      if (this.PhotoValue) {
        axios.post("api/SearchPhotos", photojsons).then(res => {
          res = res.data;
          if (res.data) {
            this.photoData = res.data;
            this.HandershowData();
          } else {
            this.showData = this.photoData;
          }
        });
      } else {
        this.tableDataPhoto();
      }
    },
    handleEdit(row, index) {
      console.log(index);
      this.editId = row.id;
      this.editTypes = row.type;
      this.editInfo = row.info;
      this.editIndex = index;
    },
    handleSave(row, index) {
      this.photoData[index].id = this.editId;
      this.photoData[index].type = this.editTypes;
      this.photoData[index].info = this.editInfo;
      console.log(this.photoData[index].type);
      this.editIndex = -1;
      let photojson = {
        id: this.editId,
        type: this.editTypes,
        info: this.editInfo,
        src: this.photoData[index].src,
        href: this.photoData[index].href
      };
      axios.post("api/UpdatePhotos", photojson).then(res => {
        this.photoData = res.data.data;
      });
      this.reload();
    },
    handleremove(index) {
      axios.get("api/DeletePhotos/" + this.photoData[index].id).then(() => {
        console.log("删除成功");
      });
      this.photoData.splice(index, 1);
      this.editIndex = -1;
      this.reload();
    },
    handleDetail(index) {
      this.$Modal.info({
        title: "photo Info",
        content: `该图片为：<img style="width:87%;height='auto'" src="${
          this.photoData[index].src
        }"/>`
      });
    }
  }
  // mounted() {
  //   this.tableDataPhoto();
  //   console.log("saa")

  // }
};
</script>

<style>
.ivu-modal-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ivu-modal {
  top: 0 !important;
}
.search_input {
  width: 25vw;
  float: right;
}
</style>
